<template>
  <div class="app-container calendar-list-container">
    <!-- // 这是搜索得到的列表 -->
    <div style="margin-top: 20px">
        <el-button icon="el-icon-download" :loading="saveLoading" type="primary" @click="payBtn">下单</el-button>
    </div>
    <el-table ref="multipleTable"  :data="listData" v-loading="listLoading"  tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" @row-click="handrowcheck">
        <el-table-column type="index"  align="center" label="序号" width="80"></el-table-column>
        <el-table-column type="selection" width="40"></el-table-column>
         <el-table-column width="150px" align="center" label="数量">
        <template slot-scope="scope">
          <span>
              <el-input style="width: 80px;" class="filter-item" placeholder="数量" v-model="scope.row.sort"></el-input>
          </span>
        </template>
      </el-table-column>
        <el-table-column align="center" label="商品图片">
            <template slot-scope="scope">
            <span><img :src="scope.row.thumb" style="width:40px;height:40px" onerror='this.src="http://wx.qlogo.cn/mmopen/C2rEUskXQiblFYMUl9O0G05Q6pKibg7V1WpHX6CIQaic824apriabJw4r6EWxziaSt5BATrlbx1GVzwW2qjUCqtYpDvIJLjKgP1ug/0"' /></span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="商品名称">
            <template slot-scope="scope">
            <span>{{scope.row.name}}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="价格">
            <template slot-scope="scope">
            <span>{{scope.row.price}}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="商品类型">
            <template slot-scope="scope">
            <span>{{scope.row.category_name}}</span>
            </template>
        </el-table-column>
          
    </el-table>
    <div style="margin-top: 20px">
        <el-button icon="el-icon-download" :loading="saveLoading" type="primary" @click="payBtn">下单</el-button>
    </div>
     <!--可自定义按钮的样式、show/hide临界点、返回的位置  -->
    <!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素  -->
    <el-tooltip placement="top" content="回到顶部">
      <back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
    </el-tooltip>
  </div>
</template>

<script>

import BackToTop from '@/components/BackToTop' // 回到顶部
import * as api from '@/api/main-api' // API
import waves from '@/directive/waves' // 水波纹指令
import { mapGetters } from 'vuex'

export default {
  name: 'orderPayment',

  directives: {
    waves
  },

  components: { BackToTop },
  data() {
    return {

      // 回到顶部样式
      myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'z-index': '9999',
        'border-radius': '4px',
        'line-height': '45px', // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
        background: '#e7eaf1'// 按钮的背景颜色 The background color of the button
      },

      listLoading: false,
      listData: [],
      multipleCheck: [],
      saveLoading: false,
      numbers: 0,
      listQuery: {
        page: 1,
        pagesize: 50,
        unit_id: 0
      },
      total: 0
    }
  },

  computed: {
    ...mapGetters(['outlet_id'])
  },

  created() {
    this.listQuery.unit_id = this.outlet_id
    setTimeout(() => {
      this.fetchData()
    }, 100)
  },

  // 触动方法
  methods: {
    // 下单
    payBtn() {
      this.saveLoading = true
      if (this.multipleCheck.length > 0) {
        // api
        var postData = { info: JSON.stringify(this.multipleCheck), unit_id: this.outlet_id }
        api.paymentProductApi(postData).then(response => {
          if (response.data.code === 0) {
            this.$root.message('下单成功', 'success')
          }
        })
        this.saveLoading = false
      }
      console.log(this.multipleCheck)
    },

    // 多选框选择数据
    handleSelectionChange(val) {
      this.multipleCheck = []
      val.forEach(row => {
        var datas = {
          amount: row.sort
        }
        if (typeof (row.product_id) === 'undefined') {
          datas.product_id = row.id // 添加属性
          datas.space_id = '0' // 添加属性
        } else {
          datas.space_id = row.id // 添加属性
          datas.product_id = row.product_id
        }
        this.multipleCheck.push(datas)
      })
    },

    // 这里是取消所有选择
    toggleSelection() {
      this.$refs.multipleTable.clearSelection()
    },

    // 点击行选中状态,在点击则取消
    handrowcheck(v) {
      this.$refs.multipleTable.toggleRowSelection(v)
    },

    // 获取数据
    fetchData() {
      this.listLoading = true
      return new Promise((resolve, reject) => {
        api.goodsIndexApi(this.listQuery).then(response => {
          if (response.data.code === 0) {
            this.listData = response.data.data
            this.total = parseInt(response.data.total)
          }
          this.listLoading = false
        })
      })
    }
  },

  // 监事事件
  watch: {
    outlet_id(id) {
      this.$nextTick(() => {
        setTimeout(() => {
          this.listQuery.unit_id = id
          this.fetchData()
        }, 20)
      })
    }
  }
}
</script>
